

<template>
    <div class="title-bars">
        <el-icon class="title-btn title-btn-close" @click="handleTitleClick('close')"><Close /></el-icon>
        <el-icon class="title-btn" @click="handleTitleClick('max')"><FullScreen /></el-icon>
        <el-icon class="title-btn" @click="handleTitleClick('min')"><Minus /></el-icon>
        <el-icon class="title-btn" @click="handleTitleClick('toggle_dev_tools')" v-if="showDevTools"><SetUp /></el-icon>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";

export default {
    name: "TitleBars",
    
    setup() {
        const state = reactive({
            showDevTools: process.env.NODE_ENV == "development"
        });

        onMounted(() => {
        });

        function handleTitleClick(type) {
            console.log(type);
            setTimeout(() => {  
                window.send[type](type);
            }, 100);  
        }

        return {
            ...toRefs(state),
            handleTitleClick
        };
    },
};
</script>

<style lang="scss" scoped>

.title-bars {
    width: 100%;
    height: 28px;
    -webkit-app-region: drag;
    background: #f6f6f7;

    .title-btn {
        width: 36px;
        height: 24px;
        float: right;
        cursor: pointer;
        margin: 0;
        -webkit-app-region: no-drag;
        color: #64676b;
    }

    .title-btn:hover {
        background: #e6e7e8;
    }

    .title-btn-close:hover {
        color: #ffffff;
        background: #f00;
    }
}

</style>
